



<template>
  <div class="title" v-if="titleTag.length!==0">
    <div class="cate">目录</div>
    <div v-for="(item, index) in titleTag" :key="index">
      <div
      @click="goCate(item)"
        class="content"
        :style="[
          { 'padding-left': (item.width-4) * 12 + 'px' }
        ]"
      >
        <span style="margin-right: 8px">*</span>{{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    titleTag: {
      type: Array,
      default: () => [],
    },
  },
  methods:{
    goCate(item){
      this.$emit("goCate",item.offsetTop)
    }
  }
};
</script>

<style scoped lang="less">
.title {
  width: 16%;
    background-color: rgba(250, 250, 250, 0.8);
    position: absolute;
    padding-bottom: 8px;
    top: 60px;
    right: 2%;
  .cate{
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-bottom: 1px solid rgba(50, 50, 50, 0.1);
  }
  .content {
    width: 100%;
    color: #444;
    font-weight: 400;
    height: 27px;
    line-height: 27px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    &:hover{
        color: red;
    }
  }
}
</style>